<!DOCTYPE html>
<html th:lang="${language}"  xmlns:th="http://www.thymeleaf.org">
<head>
	<th:block th:include="include :: header(#{okr.add})"/>
	<th:block th:include="include :: summernote-css"/>
	<th:block th:include="include :: layout-latest-css" />
	<th:block th:include="include :: ztree-css" />
</head>
<body class="white-bg">
<div class="ui-layout-west">
	<div class="box box-main">
		<div class="box-header">
			<div class="box-title">
				<i class="fa icon-grid"></i> 组织结构
			</div>
			<div class="box-tools pull-right">
				<a type="button" class="btn btn-box-tool" href="#" onclick="dept()" title="管理部门"><i class="fa fa-edit"></i></a>
				<button type="button" class="btn btn-box-tool" id="btnExpand" title="展开" style="display:none;"><i class="fa fa-chevron-up"></i></button>
				<button type="button" class="btn btn-box-tool" id="btnCollapse" title="折叠"><i class="fa fa-chevron-down"></i></button>
				<button type="button" class="btn btn-box-tool" id="btnRefresh" title="刷新部门"><i class="fa fa-refresh"></i></button>
			</div>
		</div>
		<div class="ui-layout-content">
			<div id="tree" class="ztree"></div>
		</div>
	</div>
</div>

<div class="ui-layout-center">
	<div class="container-div">
		<div class="row">
			<div class="col-sm-12 search-collapse">
				<form id="user-form">
					<input type="hidden" id="deptId" name="deptId">
					<input type="hidden" id="parentId" name="parentId">
					<div class="select-list">
						<ul>
							<li>
								登录名称：<input type="text" name="loginName"/>
							</li>
							<!--                            <li>-->
							<!--                                手机号码：<input type="text" name="phonenumber"/>-->
							<!--                            </li>-->
							<li>
								用户名：<input type="text" name="userName"/>
							</li>
							<li>
								<a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
								<a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh" ></i>&nbsp;重置</a>
							</li>
						</ul>
					</div>

				</form>

			</div>
			<div class="col-sm-12 select-table table-striped">
				<table id="bootstrap-table-3"></table>
			</div>

		</div>
	</div>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: summernote-js"/>
<th:block th:include="include :: layout-latest-js" />
<th:block th:include="include :: ztree-js" />
<script type="text/javascript">
	var prefix = ctx + "okr/info";

	$(function() {
		var panehHidden = false;
		if ($(this).width() < 769) {
			panehHidden = true;
		}
		$('body').layout({ initClosed: panehHidden, west__size: 185 });
		queryUserList();
		queryDeptTree();
	});

	function submitHandler(index, layero) {

		let rows3 = $.map($("#bootstrap-table-3").bootstrapTable('getSelections'), function (row) {
			return {"userId":row[table.options.columns[1].field],"userName":row[table.options.columns[2].field]};
		});

		if (rows3.length > 0){
			let users = new Array();
			for (let i = 0; i < rows3.length; i++) {
				console.log(rows3[i]["userName"])
				users.push(rows3[i]["userName"])
			}
			$.ajax({
				url: ctx + "comment/getAtUsers",
				type: 'POST',
				data: {"users" : users},
				dataType:"json",
				success: function(data){
					if (data.code === 500){
						console.log(data.msg)
						$.modal.msg(data.msg, modal_status.FAIL)
					}else{
						$.modal.msg(data.msg, modal_status.SUCCESS)
						$.modal.close()
						if (rows3.length === 0) {
							$.modal.alertWarning("请至少选择一条记录");
							return;
						}
						parent.selectUser(rows3);
					}
				}
			})
		}
	}

	function queryDeptTree()
	{
		var url = ctx + "system/dept/treeData";
		var options = {
			url: url,
			expandLevel: 2,
			onClick : zOnClick,
			check: { enable: false }
		};
		$.tree.init(options);

		function zOnClick(event, treeId, treeNode) {
			$("#deptId").val(treeNode.id);
			$("#parentId").val(treeNode.pId);
			$.table.search();
		}
	}

	$('#btnExpand').click(function() {
		$._tree.expandAll(true);
		$(this).hide();
		$('#btnCollapse').show();
	});

	$('#btnCollapse').click(function() {
		$._tree.expandAll(false);
		$(this).hide();
		$('#btnExpand').show();
	});

	$('#btnRefresh').click(function() {
		queryDeptTree();
	});

	function queryUserList(){
		$(function() {
			let options3 = {
				url: ctx + "okr/orgUser/userList",
				id: "bootstrap-table-3",
				showFooter: true,
				// showSearch: false,
				// showRefresh: false,
				showToggle: false,
				showColumns: false,
				columns: [
					{
						checkbox: true
					},
					{
						field : 'userId',
						title : 'uId',
						visible: false
					},
					{
						field : 'userName',
						title : '用户名'
					}
				]
			};
			$.table.init(options3);
		});
	}


</script>
</body>
</html>